<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="./css/UserLogin.css">
<script src="./js/jquery-3.7.1.js"></script>

<body>
    <div class="header">
        <video src="./img/1.mp4" autoplay muted loop></video>
        <div class="top">
            <div class="left">
                <ul>
                    <li>下载头条APP</li>
                    <li>添加到桌面</li>
                    <li>关于头条</li>
                    <li>反馈</li>
                    <li>侵权投诉</li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li>天气晴晴晴</li>
                    <li>消息</li>
                    <li>发布作品</li>
                    <li class="user">你好，<span class="userName"></span></li>
                    <li><button class="login">请登录</button></li>
                    <li class="exit" onclick="exit()">退出</li>

                </ul>

                </ul>
            </div>

        </div>
        <div class="headertitle">
            <h1>今日头条</h1>
            <p><input type="text" placeholder="666666666">
            <div class="img">
                <img src="./img/搜索.png" alt="" class="search">
            </div>
            </p>

        </div>
    </div>
    </div>
    <div class="nav">
        <div class="left">
            <div class="logo">今日头条</div>
            <div class="list">
                <ul>
                    <li>关注</li>
                    <li class="looking">推荐</li>
                    <li>郑州</li>
                    <li>视频</li>
                    <li data-type="财经">财经</li>
                    <li data-type="科技">科技</li>
                    <li data-type="热点">热点</li>
                    <li data-type="国际">国际</li>
                    <li>更多^</li>
                </ul>
            </div>
        </div>
        <div class="right">
            <input type="text" placeholder="666666666">
            <div class="img">
                <img src="./img/搜索.png" alt="" class="search">
            </div>
            <div class="msg">消息</div>
        </div>
    </div>
    <div class="body">
        <div class="leftbody">
            <div class="headerbody">
                <ul>
                    <li>关注</li>
                    <li class="looking">推荐</li>
                    <li>郑州</li>
                    <li>视频</li>
                    <li data-type="财经">财经</li>
                    <li data-type="科技">科技</li>
                    <li data-type="热点">热点</li>
                    <li data-type="国际">国际</li>
                    <li>更多^</li>
                </ul>
            </div>
           
                <div class="important-news">
                    <div class="important-news-header">
                        <div class="important-news-title">

                            <div class="red">今日</div>
                            <div class="other">要闻</div>

                        </div>
                        <div class="date">2025.11.03 星期一

                        </div>

                    </div>
                    <div class="important-news-list">
                        <ul>
                            <li>aaaaaaaa</li>
                            <li>bbbbbbbb</li>
                            <li>cccccccc</li>
                            <li>dddddddd</li>
                            <li>ffffffff</li>
                        </ul>
                    </div>
                </div>
                <div class="newslist">
                    <div class="news">
                        <div class="title">白宫降板器，sadiaosdoia
                            白宫降板器，sadiaosdoia
                            白宫降板器，sadiaosdoia白宫降板器，sadiaosdoia</div>

                        <div class="underleft">
                            <ul>
                                <li>作者</li>
                                <li>评论数</li>
                                <li>时间</li>
                            </ul>
                        </div>
                        <div class="img"><img src="./img/新闻图片.jpg" alt=""></div>
                    </div>
                </div>
            
        </div>
        <div class="rightbody">
            <div class="confimLogin">
                <p>
                    登录后，头条更懂你
                    <a href="./作业表单1.html"><button>立即登录</button></a>
                </p>
            </div>
            <div class="safe">
                <div class="carousel">
                    <p>安全课堂</p>
                    <img src="" alt="">
                    <img src="" alt="">
                    <img src="" alt="">
                    <img src="" alt="">
                    <img src="" alt="">
                </div>
            </div>
            <div class="trending-list">
                <div class="trending-list-header">
                    <div class="img1"><img src="./img/火.png" alt=""> 头条热榜 </div>
                    <div class="change"><img src="./img/换一换.png" alt=""> 换一换</div>
                </div>
                <ul>
                    <li><span class="one">1</span> 热榜热榜热榜</li>
                    <li><span class="two">2</span> 热榜热榜热榜</li>
                    <li><span class="three">3</span> 热榜热榜热榜</li>
                    <li><span>4</span> 热榜热榜热榜</li>
                    <li><span>5</span> 热榜热榜热榜</li>
                    <li><span>6</span> 热榜热榜热榜</li>
                    <li><span>7</span> 热榜热榜热榜</li>
                    <li><span>8</span> 热榜热榜热榜</li>
                    <li><span>9</span> 热榜热榜热榜</li>
                    <li><span>10</span> 热榜热榜热榜</li>
                </ul>
            </div>
            <div class="download">
                <div class="left">
                    <h1>扫码下载今日头条APP</h1>
                    <p>看最新,最热资讯内容</p>
                </div>
                <div class="QR-img">
                    <img src="" alt="">
                </div>
            </div>
            <div class="trending-movie">
            </div>
            <div class="detil">
                <p>@2025 今日头条</p>
                <p>扫黄打非网上举报</p>
                <p>网络谣言曝光台</p>
                <p>网上有害信息举报</p>
                <p>侵权举报受理公示</p>
                <p>MCN 专项举报：mcnjubao@toutiao.com</p>
                <p>未成年人相关举报：400-140-2108</p>
                <p>算法推荐专项举报：sfjubao@bytedance.com</p>
                <p>京ICP证140141号</p>
                <p>京ICP备12025439号-3</p>
                <p>网络文化经营许可证 京网文〔2023〕3628-111号</p>
                <p>营业执照 广播电视节目制作经营许可证</p>
                <p>出版物经营许可证 营业性演出许可证</p>
                <p>互联网新闻信息服务许可证 11220190002</p>
                <p>药品医疗器械网络信息服务备案编号：（京）网药械信息备字（2023）第00006号互联网宗教信息服务许可证：京（2025）0000021</p>
                <p>跟帖评论自律管理承诺书</p>
                <p>京公网安备 11000002002023号</p>
                <p>网信算备110108823483902220017号</p>
                <p>网信算备110108823483904220019号</p>
                <p>网信算备110108823483903230017号</p>
            </div>
            <div class="trending-list fix">
                <div class="trending-list-header">
                    <div class="img1"><img src="./img/火.png" alt=""> 头条热榜 </div>
                </div>
                <ul>
                    <li><span class="one">1</span> 热榜热榜热榜</li>
                    <li><span class="two">2</span> 热榜热榜热榜</li>
                    <li><span class="three">3</span> 热榜热榜热榜</li>
                    <li><span>4</span> 热榜热榜热榜</li>
                    <li><span>5</span> 热榜热榜热榜</li>
                    <li><span>6</span> 热榜热榜热榜</li>
                    <li><span>7</span> 热榜热榜热榜</li>
                    <li><span>8</span> 热榜热榜热榜</li>
                    <li><span>9</span> 热榜热榜热榜</li>
                    <li><span>10</span> 热榜热榜热榜</li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <script>
        const param = new URLSearchParams(window.location.search);
        var userId = param.get('id');
        if (userId != null) {
            $(".login").hide(),
                $(".user").show(),
                $(".userName").text(userId)
            $(".confimLogin").hide();
            $(".exit").show();
        }
        function formatTimeDiff(time1, time2 = new Date(), showZero = false) {
            // 1. 统一转换为 Date 对象（处理各种输入格式）
            const date1 = new Date(time1);
            const date2 = new Date(time2);

            // 校验时间格式有效性
            if (isNaN(date1.getTime()) || isNaN(date2.getTime())) {
                return "无效的时间格式";
            }

            // 2. 计算毫秒差（取绝对值，兼容过去/未来时间）
            let diffMs = Math.abs(date1.getTime() - date2.getTime());

            // 3. 定义时间单位（毫秒）
            const units = [
                { name: "天", value: 24 * 60 * 60 * 1000 },
                { name: "小时", value: 60 * 60 * 1000 },
                { name: "分", value: 60 * 1000 },
                { name: "秒", value: 1000 },
            ];

            // 4. 拆分每个单位的数值
            const parts = units.map((unit) => {
                const count = Math.floor(diffMs / unit.value);
                diffMs = diffMs % unit.value; // 剩余毫秒数
                return { count, name: unit.name };
            });

            // 5. 过滤零值单位（根据 showZero 参数）
            const resultParts = showZero
                ? parts
                : parts.filter((part) => part.count > 0);

            // 6. 拼接结果（无有效单位时返回"0秒"）
            if (resultParts.length === 0) {
                return "0秒";
            }
            return resultParts.map((part) => `${part.count}${part.name}`).join("");
        }
        var isLoading = false;
        var pageSize = 5;
        var currentPage = 1;
        var maxPage = 2
        getAllNews(currentPage);
        function getAllNews(page) {
            if (isLoading) return; // 正在加载中，忽略后续请求
            isLoading = true; // 开启加载锁
            var settings = {
                "url": "http://10.47.164.204:8080/servletdemo/GetAllNews?page=" + page + "&pageSize=" + pageSize,
                "method": "GET",
                "timeout": 0,
            };

            $.ajax(settings).done(function (response) {

                // console.log(response);
                total = JSON.parse(response).total;
                maxPage = Math.floor(total / pageSize) + 1;
                if (currentPage >= maxPage) {
                    currentPage = maxPage
                }
                console.log(maxPage);
                let data = JSON.parse(response).data

                data.forEach(element => {
                    let getDate = element.publishDate;
                    let date = formatTimeDiff(getDate);
                    var div =
                        `<a href="newsInfo.html?newsId=${element.newsId}&userId=${userId}"><div class="news">
                <div class="title">${element.newsTitle.substring(0, 100)}</div>
                <div class="underleft">
                    <ul>
                        <li>${element.newsAuthor}</li>
                        <li>${element.newsCommentCount}</li>
                        <li>${date}</li>
                    </ul>
                </div>
                <div class="img"><img src="http://10.47.164.204:8080/servletdemo/${element.newsImgs}" alt=""></div>
            </div></a>`
                    $(".newslist").append(div);
                }
                );
            })
            isLoading = false;
        }
        const $targetSection = $('.newslist');

        // 监听滚动事件
        $(window).scroll(() => {
            if (isLoading) return;
            if (currentPage >= maxPage) return
            const scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();

            // 当视图底部超过目标元素顶部，且未超过目标元素底部时显示控件
            if (scrollBottom < 200) {
                currentPage += 1
                const nextPage = currentPage;
                getAllNews(nextPage);
                console.log("加载下一页：", nextPage);
            }
        })
            ;
        $(window).scroll(() => {
            const scrollTop = $(window).scrollTop(); // 滚动距离（窗口顶部到文档顶部）

            // 当滚动距离超过500px时
            if (scrollTop > 500) {
                $(".nav").show(); // 显示导航栏

            } else {
                $(".nav").hide(); // 隐藏导航栏

            }
            if (scrollTop > 1200) {
                $(".fix").show(); // 显示固定热度榜
                // 设置固定定位（其实CSS已设position:fixed，这里可省略，保险起见可加）
                $(".fix").css({ position: "fixed" });
            } else {
                $(".fix").hide(); // 隐藏固定热度榜
                // 重置为静态定位（可选，不影响功能）
                $(".fix").css({ position: "static" });
            }
        });
        function exit() {
            location.href = "./UserIndex.html"
        };
        var settings = {
            "url": "http://10.47.164.203:8080/servletdemo/GetTendingServlet",
            "method": "GET",
            "timeout": 0,
        };
        const $fixedTrending = $(".trending-list").find("ul");
        $fixedTrending.empty(); // 清空原有内容

        $.ajax(settings).done(function (response) {

            let data = JSON.parse(response).data
            console.log(data);


            data.forEach((item, index) => {
                const rank = index + 1;
                let rankClass = "";
                if (rank === 1) rankClass = "one";
                else if (rank === 2) rankClass = "two";
                else if (rank === 3) rankClass = "three";
                const liHtml = `
            <li>
                <span class="${rankClass}">${rank}</span>
                <a href="newsInfo.html?newsId=${item.newsId}&userId=${userId}" style="text-decoration: none; color: inherit;">
                    ${item.newsTitle}
                </a>
            </li>
        `;
                $fixedTrending.append(liHtml)
            });
        });
        $(document).on("mouseenter", ".headerbody>ul>li", function () {
            $(this).addClass("chosing")
        })
        $(document).on("mouseleave", ".headerbody>ul>li", function () {
            $(this).removeClass("chosing")
        })
        $(document).on("click", ".headerbody>ul>li", function () {
            $(".headerbody>ul>li").removeClass("looking");
            $(this).addClass("looking");
            let aaa =$(this).data("type");
            console.log(aaa);
if(aaa=="推荐"){
    getAllNews(currentPage);
}
            var settings = {
                "url": "http://10.47.164.203:8080/servletdemo/GetNewsByTypeServlet?type=" +aaa ,
                "method": "GET",
                "timeout": 0,
            };

            $.ajax(settings).done(function (response) {
                $(".newslist").empty()
                let data = JSON.parse(response).data

                data.forEach(element => {
                    let getDate = element.publishDate;
                    let date = formatTimeDiff(getDate);
                    var div =
                        `<a href="newsInfo.html?newsId=${element.newsId}&userId=${userId}"><div class="news">
<div class="title">${element.newsTitle.substring(0, 100)}</div>
<div class="underleft">
    <ul>
        <li>${element.newsAuthor}</li>
        <li>${element.newsCommentCount}</li>
        <li>${date}</li>
    </ul>
</div>
<div class="img"><img src="http://10.47.164.204:8080/servletdemo/${element.newsImgs}" alt=""></div>
</div></a>`
                    $(".newslist").append(div);
                }
                );
            })
        });
        


    </script>

</body>

</html>